import React ,{useEffect}from 'react'
import {useDispatch,useSelector} from 'react-redux'
import * as api from '../../api/index'
import { Tabs } from 'react-vant';
import withRouter from '../../until/withRouter';
function Classify({router}) {
  const dispatch = useDispatch()
  useEffect(()=>{
    dispatch(api.get_list())
  },[dispatch])
  let list = useSelector(state=>{
    return state.reducer.data
  })
  console.log(list);
  const set_child=(index)=>{
    dispatch(api.set_index(index))
  }
  const listChild = useSelector(state=>{
    return state.reducer.dataChild
  })
  const goto_detail=(val)=>{
    router.navigate(`/detail/${val.id}`,{state:val})
  }
  return (
    <div className="demo-tabs">
      <Tabs active={0} onChange={set_child}>
        {list.map((item,index) => (
          <Tabs.TabPane key={index} title={item.title}>
            {/* 内容 {item} */}
            {
              listChild.map((val,i)=>{
                return  <div key={i} onClick={()=>goto_detail(val)}>
                  <img src={val.img}/>
                  <p>{val.title}</p>
                </div>
              })
            }
          </Tabs.TabPane>
        ))
      }
      </Tabs>
    </div>
  )
}

export default withRouter(Classify)